<template>
  <el-dialog
    :visible.sync="visible"
    title='修改密码'
    :show-close="haslogin"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm"  @keydown.enter.native.prevent="dataFormSubmitHandle()" label-width="120px">
      <el-form-item label='账号'>
        <span>{{ $store.state.user.username }}</span>
      </el-form-item>
      <!-- <el-form-item prop="phone" label='电话'>
        <span>{{ $store.state.user.phone }}</span>
      </el-form-item> -->
      <el-form-item prop="newPassword" label="新密码">
        <el-input v-model="dataForm.newPassword" show-password type="password" placeholder="新密码"></el-input>
      </el-form-item>
      <el-form-item prop="comfirmPassword" label="确认密码">
        <el-input v-model="dataForm.comfirmPassword" show-password type="password" placeholder="确认密码"></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false" v-if="haslogin">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { debounce } from 'lodash'
import { clearLoginInfo } from '@/utils'
import servicesApi from '@/services/servicesApi'
export default {
  data() {
    return {
      visible: false,
      haslogin: true,
      dataForm: {
        password: '',
        newPassword: '',
        comfirmPassword: '',
        account: this.$store.state.user.username,
        phone: this.$store.state.user.phone
      }
    }
  },
  computed: {
    dataRule() {
      let validateConfirmPassword = (rule, value, callback) => {
        if (this.dataForm.newPassword !== value) {
          return callback(new Error('确认密码与新密码输入不一致'))
        }
        callback()
      }
      return {
        // password: [
        //   { required: true, message: '原密码不能为空', trigger: 'blur' }
        // ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          // { pattern: new RegExp("^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$"), message: '密码为6-16位大小写字母+数字组合，请重新输入', trigger: "blur" }
        ],
        comfirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' },
          // { pattern: new RegExp("^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$"), message: '密码为6-16位大小写字母+数字组合，请重新输入', trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    init(data) {
      // console.log(data)
      if (!data) {
        this.haslogin = data
      }
      
      // console.log('是否登录=%s', this.haslogin)
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function() {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) { return false }
        servicesApi.resetPwd(this.dataForm).then(res => {
          if (res.data.code !== 200) {
            return this.$message.error(res.data.msg)
          }
          this.$message({
            message: '密码修改成功',
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              clearLoginInfo()
              this.$router.replace({ name: 'login' })
            }
          })
        }).catch(() => { })
        // this.$http.put('/sys/user/password', this.dataForm).then(({ data: res }) => {
        //   if (res.code !== 0) {
        //     return this.$message.error(res.msg)
        //   }
        //   this.$message({
        //     message: this.$t('prompt.success'),
        //     type: 'success',
        //     duration: 500,
        //     onClose: () => {
        //       this.visible = false
        //       clearLoginInfo()
        //       this.$router.replace({ name: 'login' })
        //     }
        //   })
        // }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
